<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Fixed column</view>
			<view class="tui-page__desc"><view>固定列</view></view>
		</view>
		<view class="tui-section__title">表格叠加实现</view>
		<view class="tui-table__container">
			<tui-table :borderLeft="false">
				<tui-tr>
					<tui-td
						:borderLeft="index == 0"
						:backgroundColor="index == 0 ? '#f8fcff' : '#fff'"
						:top="index == 0"
						:hidden="index != 0"
						:shrink="false"
						bold
						v-for="(item, index) in header"
						:key="index"
						:span="8"
					>
						{{ item.title }}
					</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td
						:borderLeft="idx == 0"
						:top="idx == 0"
						:hidden="idx != 0"
						:backgroundColor="idx == 0 ? '#f8fcff' : '#fff'"
						:shrink="false"
						:span="8"
						v-for="(obj, idx) in header"
						:key="idx"
					>
						{{ item[obj.key] }}
					</tui-td>
				</tui-tr>
			</tui-table>
			<scroll-view scroll-x class="tui-table__scroll">
				<tui-table :borderLeft="false">
					<tui-tr>
						<tui-td backgroundColor="#fff" :shrink="false" :hidden="index == 0" bold v-for="(item, index) in header" :key="index" :span="8">{{ item.title }}</tui-td>
					</tui-tr>

					<tui-tr v-for="(item, index) in listData" :key="index">
						<tui-td backgroundColor="#fff" :shrink="false" :hidden="idx == 0" :span="8" v-for="(obj, idx) in header" :key="idx">{{ item[obj.key] }}</tui-td>
					</tui-tr>
				</tui-table>
			</scroll-view>
		</view>

		<view class="tui-section__title">表格叠加实现</view>
		<view class="tui-table__container">
			<tui-table :borderLeft="false">
				<tui-tr>
					<tui-td
						:borderLeft="index == 0"
						:backgroundColor="index == 0 || index == 1 ? '#f8fcff' : '#fff'"
						:top="index == 0 || index == 1"
						:hidden="index != 0 && index != 1"
						:shrink="false"
						bold
						v-for="(item, index) in header"
						:key="index"
						:span="index == 4 || index == 5 ? 8 : 5"
						alignItems="center"
					>
						{{ item.title }}
					</tui-td>
				</tui-tr>
				<tui-tr v-for="(item, index) in listData" :key="index">
					<tui-td
						alignItems="center"
						:borderLeft="idx == 0"
						:top="idx == 0 || idx == 1"
						:hidden="idx != 0 && idx != 1"
						:backgroundColor="idx == 0 || idx == 1 ? '#f8fcff' : '#fff'"
						:shrink="false"
						:span="idx == 4 || idx == 5 ? 8 : 5"
						v-for="(obj, idx) in header"
						:key="idx"
					>
						{{ item[obj.key] }}
					</tui-td>
				</tui-tr>
			</tui-table>
			<scroll-view scroll-x class="tui-table__scroll">
				<tui-table :borderLeft="false">
					<tui-tr>
						<tui-td
							alignItems="center"
							backgroundColor="#fff"
							:shrink="false"
							:hidden="index == 0 || index == 1"
							bold
							v-for="(item, index) in header"
							:key="index"
							:span="index == 4 || index == 5 ? 8 : 5"
						>
							{{ item.title }}
						</tui-td>
					</tui-tr>

					<tui-tr v-for="(item, index) in listData" :key="index">
						<tui-td
							alignItems="center"
							backgroundColor="#fff"
							:shrink="false"
							:hidden="idx == 0 || idx == 1"
							:span="idx == 4 || idx == 5 ? 8 : 5"
							v-for="(obj, idx) in header"
							:key="idx"
						>
							{{ item[obj.key] }}
						</tui-td>
					</tui-tr>
				</tui-table>
			</scroll-view>
		</view>
	</view>
</template>

<script>
/*

实现思路：
一、固定列高度，定义新元素模拟首列或尾列并悬挂于左右侧[除非已知内容或者内容超出隐藏]

二、利用 js 获取当前行高度并赋值于固定列元素 [pc端使用分页，每次显示数量固定，而移动端采用上拉加载，数量可能过大]

三 、使用sticky固定，有些许兼容问题

四、双表格叠加，简单/页面结构冗余

...
 
*/
export default {
	data() {
		return {
			header: [
				{
					title: '姓名',
					key: 'name'
				},
				{
					title: '年龄',
					key: 'age'
				},
				{
					title: '省份',
					key: 'province'
				},
				{
					title: '市区',
					key: 'city'
				},
				{
					title: '地址',
					key: 'address'
				},
				{
					title: '日期',
					key: 'date'
				}
			],
			listData: [
				{
					id: 1,
					name: '张三',
					age: '18',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路',
					date: '2020-11-11'
				},
				{
					id: 2,
					name: '李四',
					age: '16',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路',
					date: '2020-11-12'
				},
				{
					id: 3,
					name: '王小虎',
					age: '38',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区石泉路450号(近中宁路)',
					date: '2020-12-12'
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
.container {
	padding-bottom: 120rpx;
}
.tui-table__container {
	width: 100%;
	overflow-x: hidden;
	position: relative;
}
.tui-table__scroll {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
</style>
